Vue中還有一個很重要的指令就是事件綁定v-on，讓DOM可以去做更多的事情。

v-on事件綁定(簡寫'@')

使用的方式為v-on:[事件名稱]="運算式"，像count++較簡短的運算可以直接寫，而比較複雜的運算式可以使用methods處理，給予一個事件名稱做綁定。

<div id="app">
    <p>count : {{count}}</p>
    <button v-on:click="count++">add</button>
    <button v-on:click="add">add</button>
</div>

const vm = Vue.createApp({
    data() {
        return {
            count: 0,
        }
    },
    methods: {
        add() {
            this.count++
        }
    }

}).mount('#app');

event物件

若需要傳入參數可以用$event帶入，就像範例中input改數字後會傳入methods的add(amount,event)，再次按下add按鈕就會count+5，改變了原本的count+1。

<div id="app">
    <p>count : {{count}}</p>
    <input v-model.number="amount"></input>
    <button v-on:click="add(amount,$event)">add</button>
</div>

const vm = Vue.createApp({
    data() {
        return {
            count: 0,
            amount: 1
        }
    },
    methods: {
        add(amount, event) {
            this.count += amount
            console.log(event.target.tagName, amount)
        }
    }

}).mount('#app');

Modifiers修飾子

事件修飾

• .stop : event.stopPropagation()，click事件不會向外層傳遞
• .prevent : event.preventDefault()，阻擋元素預設行為
• .capture : 點擊內層元素會先觸發有綁.capture的外層
• .self : 觸發元素本身
• .once : 觸發一次
• .passive : 阻止event.preventDefault()

鍵盤修飾

@keyup.enter

• .enter
• .tab
• .delete
• .esc
• .space
• .up
• .down

系統修飾

• .ctrl
• .alt
• .shift
• .meta : meta 對應command 鍵(⌘)；Windows 系統鍵盤對應Windows 徽標鍵(⊞)
• .exact

<!--ctrl+任何按鈕都會觸發-->
<button v-on:click.ctrl="onClick">A</button>
<!--只有ctrl才會觸發-->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

鼠標按鈕修飾

• .left
• .right
• .middle

參考資料

監聽事件
https://cn.vuejs.org/v2/guide/events.html#按键码